import React, { useState } from 'react';
import { Table, Button, Input, Select, Modal, Form } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import './assignPerson.less';


interface DataType {
  key: number;
  projectName: string;
  hiddenType: string;
  description: string;
  attachment: string;
  reportDate: string;
  reporter: string;
  status: string;
  actions: string[];
}

interface AssignPersonModalProps {
  visible: boolean;
  onCancel: () => void;
  onOk: (values: any) => void;
}

const AssignPersonModal: React.FC<AssignPersonModalProps> = ({
  visible,
  onCancel,
  onOk,
}) => {
  const [form] = Form.useForm();

  const handleOk = async () => {
    try {
      const values = await form.validateFields();
      onOk(values);
      form.resetFields();
    } catch (error) {
      console.error('Validate Failed:', error);
    }
  };

  return (
    <Modal
      title="指派人员"
      open={visible}
      onCancel={onCancel}
      onOk={handleOk}
      destroyOnClose
    >
      <Form
        form={form}
        layout="vertical"
        initialValues={{
          status: '待处理'
        }}
      >
        <Form.Item
          name="projectName"
          label="工程名称"
          rules={[{ required: true, message: '请选择工程名称' }]}
        >
          <Select
            placeholder="请选择工程名称"
            options={[
              { value: '知恩塔机塔', label: '知恩塔机塔' },
              { value: '山城塔机塔', label: '山城塔机塔' },
            ]}
          />
        </Form.Item>
        <Form.Item
          name="hiddenType"
          label="隐患类型"
          rules={[{ required: true, message: '请选择隐患类型' }]}
        >
          <Select
            placeholder="请选择隐患类型"
            options={[
              { value: '日常巡查', label: '日常巡查' },
              { value: '其他', label: '其他' },
            ]}
          />
        </Form.Item>
        <Form.Item
          name="description"
          label="隐患描述"
          rules={[{ required: true, message: '请输入隐患描述' }]}
        >
          <Input.TextArea rows={4} placeholder="请输入隐患描述" />
        </Form.Item>
        <Form.Item
          name="assignPerson"
          label="指派人员"
          rules={[{ required: true, message: '请选择指派人员' }]}
        >
          <Select
            placeholder="请选择指派人员"
            options={[
              { value: '张三', label: '张三' },
              { value: '李四', label: '李四' },
              { value: '王五', label: '王五' },
            ]}
          />
        </Form.Item>
        <Form.Item
          name="status"
          label="状态"
        >
          <Input disabled />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default function HiddenDangerRepairResult() {
  const [searchParams, setSearchParams] = useState({
    dateRange: [],
    projectName: '',
    hiddenType: undefined,
    status: undefined,
  });

  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'key',
      width: 60,
    },
    {
      title: '工程名称',
      dataIndex: 'projectName',
      width: 150,
    },
    {
      title: '隐患类型',
      dataIndex: 'hiddenType',
      width: 120,
    },
    {
      title: '隐患描述',
      dataIndex: 'description',
      width: 200,
      ellipsis: true,
    },
    {
      title: '隐患照片',
      dataIndex: 'attachment',
      width: 100,
      render: () => <Button type="link">查看</Button>,
    },
    {
      title: '发现时间',
      dataIndex: 'reportDate',
      width: 120,
    },
    {
      title: '发现人',
      dataIndex: 'reporter',
      width: 100,
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 100,
      render: (status) => {
        const statusMap = {
          '待审核': <span style={{ color: '#FF9900' }}>待审核</span>,
          '待处理': <span style={{ color: '#FF9900' }}>待处理</span>,
          '已处理': <span style={{ color: '#52C41A' }}>已处理</span>,
        };
        return statusMap[status as keyof typeof statusMap] || status;
      }
    },
    {
      title: '操作',
      width: 180,
      render: (_, record) => (
        <div className="action-buttons">
          {record.status === '待审核' && (
            <>
              <Button type="link" className="audit">审核</Button>
              <Button type="link" className="view">查看</Button>
              <Button type="link" className="delete">删除</Button>
            </>
          )}
          {record.status === '待处理' && (
            <>
              <Button type="link" className="process">处理</Button>
              <Button type="link" className="view">查看</Button>
            </>
          )}
          {record.status === '已处理' && (
            <Button type="link" className="view">查看</Button>
          )}
        </div>
      ),
    },
  ];

  const data: DataType[] = [
    {
      key: 1,
      projectName: '知恩塔机塔',
      hiddenType: '日常巡查',
      description: '一号机/五号机相邻塔...',
      attachment: '',
      reportDate: '2024-02-10',
      reporter: '王明',
      status: '待审核',
      actions: ['审核', '查看', '删除'],
    },
    {
      key: 2,
      projectName: '山城塔机塔',
      hiddenType: '日常巡查',
      description: '一号机/五号机相邻塔...',
      attachment: '',
      reportDate: '2024-02-10',
      reporter: '刘东',
      status: '待处理',
      actions: ['处理', '查看'],
    },
    // ... 更多数据
  ];

  const handleSearch = () => {
    // 实现搜索逻辑
  };

  const handleReset = () => {
    setSearchParams({
      dateRange: [],
      projectName: '',
      hiddenType: undefined,
      status: undefined,
    });
  };

  const [modalVisible, setModalVisible] = useState(false);

  const handleAdd = () => {
    setModalVisible(true);
  };

  const handleModalCancel = () => {
    setModalVisible(false);
  };

  const handleModalOk = (values: any) => {
    console.log('Form values:', values);
    // 这里处理表单提交逻辑
    // 可以调用 API 保存数据
    setModalVisible(false);
  };

  return (
    <div className="hidden-danger-repair-result">
      <div className="search-bar">
        <Select
          placeholder="工程名称"
          style={{ width: 200 }}
          value={searchParams.projectName}
          onChange={(value) => setSearchParams(prev => ({ ...prev, projectName: value }))}
          options={[
            { value: '知恩塔机塔', label: '知恩塔机塔' },
            { value: '山城塔机塔', label: '山城塔机塔' },
          ]}
        />
        <Select
          placeholder="隐患类型"
          style={{ width: 200 }}
          value={searchParams.hiddenType}
          onChange={(value) => setSearchParams(prev => ({ ...prev, hiddenType: value }))}
          options={[
            { value: '日常巡查', label: '日常巡查' },
            { value: '其他', label: '其他' },
          ]}
        />
        <Select
          placeholder="状态"
          style={{ width: 200 }}
          value={searchParams.status}
          onChange={(value) => setSearchParams(prev => ({ ...prev, status: value }))}
          options={[
            { value: '待审核', label: '待审核' },
            { value: '待处理', label: '待处理' },
            { value: '已处理', label: '已处理' },
          ]}
        />
        <Button type="primary" onClick={handleSearch}>查询</Button>
        <Button onClick={handleReset}>重置</Button>
        <Button type="primary" onClick={handleAdd} className="add-button">添加</Button>
      </div>
      <Table 
        columns={columns} 
        dataSource={data}
        pagination={{
          total: 50,
          current: 1,
          pageSize: 10,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => `共 ${total} 条`,
        }}
      />
      <AssignPersonModal
        visible={modalVisible}
        onCancel={handleModalCancel}
        onOk={handleModalOk}
      />
    </div>
  );
}
